<template>
    <div class="details">
      <div class="top">
        <div class="top-1" @click="jump1"><van-icon name="arrow-left" size="0.3rem" color="#fff"/></div>
      </div>
      <div class="ph" >
        <img :src="arr.imgList[1].img" alt="">
      </div>
      <div class="power">
        <h1>{{arr.name}}</h1>
        <p>{{arr.info}}</p>
        <h2>${{arr.price}}</h2>
        <van-cell is-link title="已选" @click="show = true" />
<!--        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />-->
        <van-action-sheet v-model="show" title="标题" class="deleA">
          <div class="content">
            <div class="content-a">
            <div class="content-a-left"><img :src="arr.imgList[0].img" alt=""></div>
              <div class="content-a-right">
               <span>${{arr.price}}</span>
                <p>{{arr.name}}</p>
              </div>
            </div>
            <div class="content-b">
              <p>版本</p>
              <div class="content-b-a" v-for="(item,index) in crr" :key="index" >
              <span>{{item.Memory}}</span>
                <p>{{item.edition_price}}元</p>
              </div>
            </div>
            <div class="content-c">
              <p>颜色</p>
              <div class="content-c-a">
                <div class="content-c-b"  v-for="(item,index) in drr" :key="index">{{item}}</div>
              </div>
            </div>
            <div class="content-d">
            <p>购买数量</p>
             <div style="width: 2.5rem">
               <van-field name="stepper" >
                 <template #input label-width="0">
                   <van-stepper v-model="stepper"/>
                 </template>
               </van-field>
             </div>
            </div>
            <div class="contnet-e" @click="addshop">
            加入购物车
            </div>
          </div>
        </van-action-sheet>
        <van-cell is-link title="送至"/>
<!--        <van-action-sheet v-model="show1" :actions="actions" @select="onSelect" />-->
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          description="这是一段描述信息"
          close-on-click-action
        />
        <van-cell is-link title="送至" @click="show = true" />
        <van-action-sheet v-model="show1" :actions="actions" @select="onSelect" />
        <van-action-sheet
          v-model="show1"
          :actions="actions"
          cancel-text="取消"
          description="这是一段描述信息"
          close-on-click-action
        />
      </div>
      <div class="hotimg">
        <img :src="arr.info_img[0].img" alt="">
      </div>
      <div class="img1">
        <img :src="arr.info_img[1].img" alt="">
      </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'Details',
  data () {
    return {
      arr: [],
      show: false,
      show1: false,
      crr: [],
      drr: ['红色', '黑色', '蓝色'],
      stepper: 1,
      actions: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三', subname: '描述信息' }
      ]
    }
  },
  created () {
    this.arr = JSON.parse(sessionStorage.getItem('arr'))
    this.crr = this.arr.edition
    console.log(this.arr)
    console.log(this.arr)
    this.crr = this.arr.edition
  },
  methods: {
    jump1 () {
      this.$router.push('/home')
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      Toast(item.name)
    },
    addshop () {
      this.$set(this.arr, 'num', this.stepper)
      this.$store.commit('addshopS', this.arr)
    }
  }
}
</script>

<style scoped lang="less">
.details{
  width: 95%;
  background: #ffffff;
  z-index: 1000;
  margin: auto;
  margin-top: 0.2rem;
  border: 0.01rem solid #D4D4D4;
  padding-bottom: 0.8rem;
  .top{
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.3rem;
    box-sizing: border-box;
  }
  }
  .top-1{
    width: 0.5rem;
    height: 0.5rem;
    background: #626262;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    line-height: 0.55rem;
  }
  .ph{
    width: 100%;
    height: 6rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .power{
    width: 100%;
    height: 4rem;
    background: #ffffff;
    h1{
      font-size: 0.32rem;
      font-weight: bold;
      text-indent: 0.2rem;
    }
    p{
      font-size: 0.24rem;
      margin-top: 0.1rem;
      color: #757575;
      margin-left: 0.2rem;
    }
    h2{
      font-size: 0.24rem;
      font-weight: bold;
      color: #FF6700;
      margin-top: 0.1rem;
      margin-bottom: 0.25rem;
      text-indent: 0.2rem;
    }
  }
  .hotimg{
    width: 100%;
    height: 12rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .img1{
    width: 100%;
    height: 5rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  /deep/ .deleA{
    overflow: auto;
  }
.content {
  height: 8.5rem;
  padding: 16px 16px 160px;
  box-sizing: border-box;
}
  .content-a{
    width: 100%;
    height: 1.72rem;
    display: flex;
  }
  .content-a-left{
    width: 30%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .content-a-right{
    width: 70%;
    height: 100%;
    span{
      font-weight: bold;
      font-size: 0.36rem;
      margin-top: 0.37rem;
      text-indent: 0.23rem;
      display: block;
    }
    p{
      color: #000;
      font-size: 0.27rem;
    }
  }
  .content-b{
    width: 100%;
    height: 1.85rem;
    margin-top: 0.45rem;
  }
  .content-b-a{
    width: 100%;
    height: 0.6rem;
    border: 1px solid #dddddd;
    margin-top: 0.17rem;
    padding: 0 0.25rem 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      font-size: 0.2rem;
      color: #8F8F94;
    }
    p{
      color: #8F8F94;
    }
  }
  .content-c{
    width: 100%;
    height: 1.18rem;
    margin-top: 0.3rem;
  }
  .content-c-a{
    width: 80%;
    height: 0.62rem;
    margin-left: 10%;
    margin-top: 0.13rem;
    display: flex;
  }
  .content-c-b{
    width: 1.07rem;
    height: 100%;
    border: 1px solid #8F8F94;
    margin-right: 0.1rem;
    text-align: center;
    line-height: 0.61rem;
    font-size: 0.28rem;
  }
  .content-d{
    width: 100%;
    height: 0.68rem;
    margin-top: 0.48rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .contnet-e{
    width: 100%;
    height: 0.57rem;
    background: #FF6700;
    margin-top: 0.1rem;
    text-align: center;
    line-height: 0.57rem;
    border-radius: 10px;
  }
</style>
